<template>
  <div class="base add-order-container">
    <HeaderTop title="Withdraw" backColor="#EC5958" backIconType="white" color="white"></HeaderTop>

    <div class="payment">
      <div class="channel border-top-icon form">
        <div class="form-group">
          <label>Select withdrawal amount</label><!--取款银行-->
          <input v-model="form.withdrawAmount" @click="showChooseBank('channel1')" type="text"
            :placeholder="$t('plsChoose')" readonly
            class="input-select val" />
        </div>
      </div>
    </div>
    <div class="alternate">
      <div class="title">Confirm payment method</div>
      <div class="channel border-top-icon form">
        <div class="form-group">
          <label>Collection channels</label>
          <input v-model="payChannel" type="text" @click="showWithDrawal" :placeholder="$t('plsChoose')"  class="input-select val" readonly/>
        </div>
        <div class="form-group" >
          <label>Payment account number</label>
          <input @focus="handleInput" v-model="form.withdrawAccount" type="text" :placeholder="$t('plsInput')" class="val" />
        </div>
        <div class="tips">Tips: <br /> 1. You can only apply for withdrawal once per day.<br/> 2. Withdrawal date: December 24, 2023 00:00:00 — January 5, 2024 24:00:00
        </div>
      </div>
    </div>
    <div class="btn-box">
      <button class="btn-ui" @click="submint" :disabled="btnCanSubmit">Apply for withdrawal</button>
    </div>
    <!--取款银行选择框-->
    <popup v-model="isVisibleRangePicker" position="bottom">
      <picker
        show-toolbar
        title="select amount"
        :columns="amountRange"
        @cancel="isVisibleRangePicker = false"
        @confirm="chooseAmountRange"/>
    </popup>
    
    <popup v-model="isVisibleChannelPicker" position="bottom">
      <picker
        show-toolbar
        title="select channel"
        :columns="channelList"
        value-key="name"
        @cancel="isVisibleChannelPicker = false"
        @confirm="chooseChannel"/>
    </popup>
  </div>
</template>
<script>

import HeaderTop from '@/components/header-top'
import { validateMobile } from '@/libs/validate';
// import Hybrid from '@/components/uzone-hybrid';

import { Popup, Picker } from 'vant';
export default {
    components:{
        Popup,
        Picker,
        HeaderTop,
    },
    data(){
        return {
          isVisibleChannelPicker:false,
          isVisibleRangePicker:false,
          payChannel: '',
          form: {
            withdrawAccount: '',
            withdrawAmount: '',
            payChannel: ''
          },
          channelList:[{name:'Coins',code:7},{name:'Gcash',code:6}],
          amountRange: [],
          bonus: 0
        }
    },
    computed: {
      btnCanSubmit() {
        const { withdrawAccount, withdrawAmount ,payChannel} = this.form
        return !withdrawAccount.trim() || !withdrawAmount || !payChannel
      }
    },
    methods:{
      chooseChannel(val){
        this.payChannel = val.name
        this.form.payChannel = val.code
        this.isVisibleChannelPicker = false
      },
      showWithDrawal(){
        this.isVisibleChannelPicker = true
      },
      handleInput () {
        const user = this.$storage.get('user')
        this.$hybrid.action('ee', {
          content: 'withdrawBonus_account_click',
          value: {
            userid: user.userId || ''
          }
        })
      },
      async submint(){
        if (this.bonus < this.form.withdrawAmount) {
          this.$toast('Insufficient amount, please complete the task first to earn a bonus.');
          return
        }
        if (!validateMobile(this.form.withdrawAccount)) {
          this.$toast(this.$tc('plsInputRightNUmber'));
          return
        }
        const user = this.$storage.get('user')
        this.$hybrid.action('ee', {
          content: 'withdrawBonus_apply_click',
          value: {
            userid: user.userId || ''
          }
        })
        const res = await this.$api.withdrawalApply({ userPhone: user.phone, ...this.form})
        const { status, error } = res
        if (status === '1' && error === '00000000') {
          this.$toast('The application has been submitted. Please check the progress on the withdrawal record page.')
          this.$hybrid.action('ee', {
            content: 'withdrawBonus_apply_success',
            value: {
              userid: user.userId || ''
            }
          })
          // this.$router.replace({
          //   path: "/doubleDanEvent/info"
          // })
          this.$router.go(-1)
        }
      },
      showChooseBank () {
        const user = this.$storage.get('user')
        this.$hybrid.action('ee', {
          content: 'withdrawBonus_quota_click',
          value: {
            userid: user.userId || ''
          }
        })
        this.isVisibleRangePicker = true
      },
      chooseAmountRange (val) {
        this.isVisibleRangePicker = false
        this.form.withdrawAmount = val
      },
      setAmountRange () {
        let amountRange = []
        for (let i = 100; i <= 10000; i = i + 100) {
          amountRange.push(i)
        }
        this.amountRange = amountRange
      }
    },
    created(){
      const query = this.$route.query;
      this.bonus = query.bonus
      this.setAmountRange()
      const user = this.$storage.get('user')
      this.$hybrid.action('ee', {
        content: 'withdrawBonus_page_show',
        value: {
          userid: user.userId || ''
        }
      })
    }
}
</script>
<style lang="scss" scoped>
    @import '../addOrder/index.scss';
</style>
